<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/4/2
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>图书在线借阅系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/book.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script type="text/javascript" src="lib/js/jquery-3.4.1.js"></script>
    <style>
        .layui-layout-body {
            background: url("lib/Images/bg-4.jpg") no-repeat;
            background-size: cover;
        }
        .layui-elem-field {
            font-weight: bolder;
        }

    </style>

    <script>

    </script>
</head>
<body class="layui-layout-body">
<div class="layui-container-box" style="width:90%;background: url(lib/Images/bg.jpg )">
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>图书借阅</legend>
    </fieldset>

    <div class="demoTable" >

        <label style="margin-left: 10px; font-size: 14px;">会员卡号：</label>
        <div class="layui-input-inline">
            <input class="layui-input" id="memId" name="id"  autocomplete="off" style="width: 100px;" />
        </div>
        <button class="layui-btn" id="searchBtn">会员信息</button>
        <label style="margin-left: 10px; font-size: 14px;">会员名称：</label>
        <div class="layui-input-inline" >
            <input class="layui-input" id="mname" name="mname"  autocomplete="off" style="width: 100px;" disabled />
        </div>
        <label style="margin-left: 10px; font-size: 14px;">会员类型：</label>
        <div class="layui-input-inline" >
            <input class="layui-input" id="memtype" name="memtype"  autocomplete="off" style="width: 100px;"disabled />
        </div>
        <label style="margin-left: 10px; font-size: 14px;">可借数量：</label>
        <div class="layui-input-inline" >
            <input class="layui-input" id="amount" name="amount"  autocomplete="off" style="width: 100px;" disabled/>
        </div>
        <label style="margin-left: 10px; font-size:14px;">账户余额：</label>
        <div class="layui-input-inline" >
            <input class="layui-input" id="balance" name="balance"  autocomplete="off" style="width: 100px;"disabled />
        </div>

        <div style="padding-top: 10px;">

            <label style="margin-left: 10px; font-size: 14px;">请输入书名：</label>
            <div class="layui-input-inline" >
                <input class="layui-input" id="search" name="search"  autocomplete="off" style="width: 150px;" />
                <input class="layui-input" type="hidden" value="bname"  id="searchType" autocomplete="off" style="width: 100px;margin-left: -120px;" />
            </div>
            <button class="layui-btn" data-type="reload" id="searchOK">确定</button> <button class="layui-btn" id="RentOk">完成借阅</button>

            <label style="margin-left: 10px; font-size: 14px;">当前时间：</label>
            <div class="layui-input-inline" >
                <input class="layui-input" id="currentDate" name="currentDate"  autocomplete="off" style="width: 100px;" disabled/>
            </div>
            <label style="margin-left: 10px; font-size:14px;">归还时间：</label>
            <div class="layui-input-inline" >
                <input class="layui-input" id="backDate" name="backDate"  autocomplete="off" style="width: 100px;"disabled />
            </div>

            <label style="margin-left: 10px; font-size:14px;">可借天数：</label>
            <div class="layui-input-inline" >
                <input class="layui-input" id="keepDay" name="keepDay"  autocomplete="off" style="width: 100px;"disabled />
            </div>

        </div>
    </div>





    <table class="layui-hide" id="book-list" lay-filter="book-list" ></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
</body>
</html>

<script type="text/html" id="img">
    <img src="{{d.pic}}" style=" align-items: center" width="50" height="40" alt="">
</script>

<script type="text/javascript">

    //记录选中的数据:做缓存使用,作为参数传递给后台,然后生成pdf ,压缩
    var ids =new Array();
    //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
    var table_data=new Array();
    layui.use(['dropdown', 'util', 'layer', 'table','form'],function () {
        var dropdown = layui.dropdown
            ,util = layui.util
            ,layer = layui.layer
            ,table = layui.table
            ,$ = layui.jquery;

        var form = layui.form;

        /**
         * 开启复选框
         */
        table.on('checkbox(book-list)', function(obj){

            if(obj.checked==true){

                if(obj.type=='one'){

                    ids.push(obj.data.id);

                }else{

                    for(var i=0;i<table_data.length;i++){

                        ids.push(table_data[i].id);

                    }

                }

            }else{

                if(obj.type=='one'){

                    for(var i=0;i<ids.length;i++){

                        if(ids[i]==obj.data.id){

                            // ids.remove(i);用这个方法会报错not a function

                            ids.pop();

                            ids.splice(i,1);

                        }

                    }

                }else{

                    for(var i=0;i<ids.length;i++){

                        for(var j=0;j<table_data.length;j++){

                            if(ids[i]==table_data[j].id){

                                // ids.remove(i);

                                 ids.pop();

                                ids.splice(i,1);

                            }

                        }

                    }

                }

            }
        });



        //输入框判空
        $("#searchOK").click(function(){
            var $ = layui.$;
            var key = $("#search").val();
            console.log(key);

            if(key==''){

                alert("请输入内容查询！");
                return;

            }else{
                var $ = layui.$, active = {
                    reload:function () {
                        //搜索框
                        var search=$('#search').val();
                        //select 选择搜索类型
                        var searchType =$("#searchType").val();
                        console.log(searchType)
                        //执行重载
                        table.reload('testReload',{
                            url:'book.let?type=select',
                            page:{
                                curr:1 //重新从第1页开始
                            },
                            where:{
                                search:search,
                                searchType:searchType

                            }

                        });
                    }

                };

                $('.demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            };
        });

        table.render({

            elem:'#book-list',
            url:'book.let?type=query',//数据接口
            title:'图书信息表',
            page:true,//开启分页
            method:'post',
            limit:5,
            limits:[3,5],
            request: {
                page: 1 //页码的参数名称，默认：page
                ,limit: 5//每页数据量的参数名，默认：limit
            } ,
            cols:[[//表头
                { checkbox: true, width: 60, fixed: true},
                {field:'id',title:'图书ID',sort:true,fixed:"left"},
                {field:'bname',title:'书名', width:110},
                {field:'typeId',title:'图书类型',templet:'<div>{{d.type.tname}}</div>',width:90},
                {field:'author',title:'作者',width:160},
                {field:'price',title:'价格', width:60},
                {field:'pic',title:'图片',templet:'#img', width:100},
                {field:'publish',title:'出版社', width:160},
                {field:'stock',title:'库存', width:60},
                {field:'address',title:'地址', width:110}
            ]],id: 'testReload',
            done: function(res,curr){
            //数据表格加载完成时调用此函数
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

            //设置全部数据到全局变量
            table_data=res.data;

            //在缓存中找到id ,然后设置data表格中的选中状态
            //循环所有数据，找出对应关系，设置checkbox选中状态
            for(var i=0;i< res.data.length;i++){
                for (var j = 0; j < ids.length; j++) {
                    //数据id和要勾选的id相同时checkbox选中
                    if(res.data[i].id == ids[j])
                    {
                        //这里才是真正的有效勾选
                        res.data[i]["LAY_CHECKED"]='true';
                        //找到对应数据改变勾选样式，呈现出选中效果
                        var index= res.data[i]['LAY_TABLE_INDEX'];
                        $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                        $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                }
            }
            //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
            var checkStatus = table.checkStatus('my-table');
            if(checkStatus.isAll){
                $(' .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
            }
            //得到所有数据
            console.log(res);
            //得到当前页码
            console.log(curr);
            //得到数据总量
            console.log(res.count);
        }
        });



        /**
         * 获取系统当期时间
         * @returns {string}
         */
        function getCurrentDate(){
            var dateObj = new Date();
            var year = dateObj.getFullYear();
            var month = dateObj.getMonth()+1; //0~11
            var date = dateObj.getDate();
            var dateStr =year+"-"+(month>=10?month:"0"+month)+"-"+(date>=10?date:"0"+date);
            return dateStr;
        }

        /**
         * 获取归还时间
         * count:借阅时间
         * @param count
         * 1d = 24h 1h = 60m 1m = 60s 1s = 1000ms
         * 把时间转化为毫秒数
         */
        function  getBackDate(count){
            //1.获取系统的当前时间
            var dateObj = new Date();
            //2.转成毫秒数
            var mills = dateObj.getMilliseconds();

            mills += count*24*60*60*1000;
            //3.转成日期
            dateObj.setMilliseconds(mills);

            //4.时间转成字符串类型
            var year = dateObj.getFullYear();
            var month = dateObj.getMonth()+1; //0~11
            var date = dateObj.getDate();
            var dateStr =year+"-"+(month>=10?month:"0"+month)+"-"+(date>=10?date:"0"+date);
            return dateStr;


        }

        $(function () {
            $("#searchOK").addClass("layui-btn-disabled").attr("disabled",true);
            $("#RentOk").addClass("layui-btn-disabled").attr("disabled",true);
            var member = null;
            $("#searchBtn").click(function () {
                //获取会员卡号
                var memId =$("#memId").val();
                if (!memId){
                    alert("请输入会员卡号");
                    return;
                }
                //数据接口
                var url="member.let?type=doajax&memId="+memId;
                //发送get请求
                $.get(url,function (data){
                    //调用get方法成功后 回调data数据
                    //json字符串
                    console.log(data);

                    if (data=="false"){
                        alert("输入会员卡号有误！");
                        window.location.href="book_rent.jsp";
                    }
                    //把json字符串，转成json对象
                    member =JSON.parse(data);
                    console.log(member);
                    console.log(member.mname+","+member.type.mtname+","+member.type.amount+","+member.balance);
                    $("#mname").val(member.mname);
                    $("#memtype").val(member.type.mtname);
                    $("#balance").val(member.balance);
                    $("#amount").val(member.type.amount);
                    $("#currentDate").val(getCurrentDate());
                    $("#backDate").val(getBackDate(member.type.keepDay));
                    $("#keepDay").val(member.type.keepDay);

                });

                //查询功能关闭
                $(this).addClass("layui-btn-disabled").attr("disabled",true);

                //开启查询按钮功能
                $("#searchOK").removeClass("layui-btn-disabled").attr("disabled",false);
                $("#RentOk").removeClass("layui-btn-disabled").attr("disabled",false);

            });
            //保存所有添加过的书名
            var booNameList = new Array();

            $("#RentOk").click(function () {

                console.log(ids);
                console.log(ids.length);
                console.log(member.type.amount);
                console.log();
                //如果选中的书大于可借数量弹出提示
                if (ids.length>member.type.amount){
                    alert("借阅书籍超过可借数量");
                    return;
                }
                if (ids.length==0){
                    alert("请选择借阅的书籍");
                    return;
                }

                var str=ids.join('_');
               location.href ="record.let?type=add&memId="+member.id+"&ids="+str;



            });

        });




        // table.on('tool(book-list)',function (obj) {
        //     var data = obj.data;
        //     if (obj.event == 'edit'){
        //         window.location.href = "" + data.id;
        //     } else if (obj.event == 'del'){
        //         layer.confirm('确定删除该条数据吗？', function(index){
        //             window.location.href = "" + data.id;
        //             layer.close(index);
        //         });
        //     }
        // })
    });
</script>


